<template>
  <view class="container" style="padding-bottom: 120rpx;">
    <u--form>
			<u-form-item label="接料站点" prop="point" labelWidth="140rpx">
				<uni-data-select
					:clear="false"
					v-model="query.point"
					:localdata="portList"
					placeholder="请选择站点"
					@change="changePoint"
				></uni-data-select>
			</u-form-item>
      <u-form-item label="箱码" prop="containerCode" labelWidth="140rpx">
        <u--input
          placeholder="请扫码箱码"
          v-model.number="query.containerCode"
          suffixIcon="scan"
          suffixIconStyle="font-size: 68rpx"
          style="flex: 1;"
					:disabled="!query.point"
					@confirm="getBoxInfo"
        >
        </u--input>
      </u-form-item>
    </u--form>
		<!-- 优化后的标题区域样式 -->
		<view v-if="currentBox && !pointFlag" class="selected-point-info">
			<u-icon name="error" color="#ff9900" size="24"></u-icon>
			<view class="info-text">所选站点绑定的接料箱码为：</view>
			<view class="box-code">{{ currentBox }}</view>
		</view>
    <!-- 扫描结果展示区域 -->
    <uni-card title="箱码信息" v-if="Object.keys(boxInfo).length > 0">
      <view class="info-grid">
        <view class="info-item">
          <view class="info-label">料号</view>
          <view class="info-value">{{ boxInfo.materialCode || null }}</view>
        </view>
				<view class="info-item">
				  <view class="info-label">数量</view>
				  <view class="info-value">{{ boxInfo.qty || null }}</view>
				</view>
				<view class="info-item">
				  <view class="info-label">胶条截面</view>
					<view class="info-value">{{ boxInfo.sealCross || null }}</view>
				</view>
				<view class="info-item">
				  <view class="info-label">刃高</view>
					<view class="info-value">{{ boxInfo.bladeHeight || null }}</view>
				</view>
        <view class="info-item">
          <view class="info-label">批号</view>
          <view class="info-value">{{ boxInfo.materialBatch || null }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">生产日期</view>
          <view class="info-value">{{ boxInfo.productionDate || null }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">冻结状态</view>
          <view class="info-value">{{ dict.text.semi_frozen[boxInfo.frozenStatus] || null }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">物料状态</view>
          <view class="info-value">{{ dict.text.semi_material_status[boxInfo.status] || null }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">入库时间</view>
          <view class="info-value">{{ boxInfo.boxInboundTime || null }}</view>
        </view>
      </view>
    </uni-card>
    <u-toast ref="uToast"></u-toast>
    <view class="commonButton">
      <u-button v-if="!pointFlag" type="primary" :disabled="!query.containerCode || Object.keys(boxInfo).length === 0" @click="confirmBind(1)">绑定接料</u-button>
			<u-button v-else type="warning" :disabled="!query.containerCode || Object.keys(boxInfo).length === 0" @click="confirmBind(2)">装箱完成</u-button>
    </view>
  </view>
</template>

<script>
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	import { getBoxInfoAPI, secondButtonAPI, getInPortListAPI, currentBindBoxAPI } from '@/api/work/ncmm'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniDataSelect
		},
		dicts: ['semi_material_status', 'semi_frozen'],
		data() {
			return {
				query: {
					point: '',
					containerCode: ''
				},
				currentBox: '',
				boxInfo: {
				},
				pointFlag: false,
				portList: []
			};
		},
		mounted() {
			this.getInPortList()
		},
		onLoad() {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},  
		onUnload() {    
			uni.$off('scancodedate')
		},
		methods: {
			async getCode(code) {
				const regex = /^R-\d+$/
				if (!this.query.point) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请先选择接料站点'
					})
				}
				if (regex.test(code)) {
					this.query.containerCode = code
					this.getBoxInfo()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描正确的箱码'
					})
				}
			},
			async changePoint(e) {
				// console.log(e)
				if (e) {
					this.currentBox = ''
					this.boxInfo = {}
					this.query.containerCode = ''
					this.pointFlag = false
					const index = this.portList.findIndex(item => item.value === e)
					console.log(index)
					// console.log(this.portList[index].text)
					const res = await currentBindBoxAPI(this.portList[index].text)
					if (res.code === 200) {
						this.currentBox = res.data || ''
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.message
						})
					}
				}
			},
			async getInPortList() {
				const res = await getInPortListAPI()
				console.log(res)
				if (res.code === 200) {
					this.portList = Object.entries(res.data).map(([value, key]) => {
						console.log(`键：${key}，值：${value}`)
						return {
								text: key,
								value: value
						}
					})
				}
			},
			async getBoxInfo() {
				const res = await getBoxInfoAPI({
					portLocation: this.query.point,
					containerCode: this.query.containerCode
				})
				if (res.code === 200) {
					const receiveDto = res.data || {}
					this.boxInfo = receiveDto
					if (receiveDto.startReceive === 1) {
						this.pointFlag = true
					} else {
						this.pointFlag = false
					}
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async confirmBind(val) {
				const submitForm = {
					containerCode: this.query.containerCode,
					...this.boxInfo,
					startReceive: val,
					portLocation: this.query.point
				}
				console.log(this.boxInfo)
				const res = await secondButtonAPI(submitForm)
				if (res.code === 200) {
					if (val === 1) {
						this.currentBox = res.data.containerCode
						this.$refs.uToast.show({
							type: 'success',
							message: '接料成功'
						})
					} else {
						this.currentBox = ''
						this.$refs.uToast.show({
							type: 'success',
							message: '装箱完成'
						})
					}
					// 重置
					this.query.containerCode = ''
					const receiveDto = res.data || {}
					this.boxInfo = receiveDto
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			}
		}
	}
</script>

<style lang="scss">
// 新增的接料点信息样式
.selected-point-info {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  margin: 20rpx 0;
  background-color: #fff8e6;
  border-left: 4rpx solid #ff9900;
  border-radius: 8rpx;
  font-size: 28rpx;
  line-height: 1.5;
  
  .info-text {
    margin: 0 10rpx;
    color: #666;
  }
  
  .box-code {
    color: #dd6161;
    font-weight: 600;
    word-break: break-all; // 处理长箱码的换行问题
  }
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 10rpx;
}

.info-item {
  width: 100%;
  padding: 15rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  line-height: 40rpx;
}

/* 可编辑输入框样式：与原文本样式保持一致，减少突兀感 */
.editable-input {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 5rpx 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 40rpx !important;
  /* 聚焦时轻微边框提示，不破坏整体风格 */
  &:focus {
    border-bottom: 1px solid #2979ff !important;
    border-radius: 0 !important;
  }
}

/* 输入框后缀单位样式 */
.u-input__suffix {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
}

.uni-card {
	margin: 0 !important;
}

.commonButton {
  padding: 20rpx;
}
</style>
